<template>
    <div class="special">
        <i class="el-icon-coin" style="color: #0084ff;font-size: 34px"></i>
        <i style="font-size: 25px;color: #121212;padding-left: 12px;font-weight: 600;">专栏</i>
        <el-row type="flex" justify="center" class="spc-z">
<!--            1-->
            <el-col :span="6">
                <div  class="grid-content">
                        <a href="https://zhuanlan.zhihu.com/jameshzd-elecat" target="_blank" class="spc-a">
                            <img class="ig" src="https://pic2.zhimg.com/v2-a3908890ffba70a605d37fd64bee2a70_xl.jpg">

                        </a>
                    <a href="https://zhuanlan.zhihu.com/jameshzd-elecat" target="_blank" class="spc-til">
                        我眼中的世界
                    </a>
                    <div style="text-align: center;line-height: 20px">
                        <p  class="scan">2,297 关注 389 文章</p>
                        <p class="desc">这里有最严肃的思考和最具亲和力的文字</p>
                    </div>
                    <button id="btn1" class="spe-btn1" @click="handleBtn1(this)">进入专栏</button>
                </div>
            </el-col>
<!--            2-->
            <el-col :span="6">
                <div  class="grid-content">
                    <a href="https://www.zhihu.com/column/iRobman" target="_blank" class="spc-a">

                        <img class="ig" src="https://pic1.zhimg.com/v2-cd77ee0023e647689748ed309616c39f_xl.jpg">
                    </a>
                    <a href="https://www.zhihu.com/column/iRobman" target="_blank" class="spc-til">
                        吾知乜名
                    </a>
                    <div style="text-align: center;line-height: 20px">
                        <p  class="scan">1,723 关注 1,077 文章</p>
                        <p class="desc">投资是毕生的事业，坚守规则活着更重要</p>
                    </div>
                    <button id="btn2" class="spe-btn1" @click="handleBtn2(this)">进入专栏</button>
                </div>
            </el-col>
<!--            3-->
            <el-col :span="6">
                <div  class="grid-content">
                    <a href="https://www.zhihu.com/column/smetalk" target="_blank" class="spc-a">
                        <img class="ig" src="https://pic2.zhimg.com/v2-a6a9edf0423593dbc34cb8c73c94469b_xl.jpg">
                    </a>
                    <a href="https://www.zhihu.com/column/smetalk" class="spc-til">
                        Dizzy In Science
                    </a>
                    <div style="text-align: center;line-height: 20px">
                        <p  class="scan">179,829 关注1,420 文章</p>
                        <p class="desc">讲讲科学史，聊聊科学家，挖挖科学冷知识。</p>
                    </div>
                    <button id="btn3" class="spe-btn1" @click="handleBtn3(this)">进入专栏</button>
                </div>
            </el-col>
<!--            4-->
            <el-col :span="6">
                <div  class="grid-content">
                    <a href="https://www.zhihu.com/column/libeichen" target="_blank" class="spc-a">
                        <img class="ig" src="https://pic4.zhimg.com/v2-683e93dcf9e16d9e196c37e0290728a3_xl.jpg">
                    </a>
                    <a href="https://www.zhihu.com/column/libeichen" class="spc-til">
                        李北辰
                    </a>
                    <div style="text-align: center;line-height: 20px">
                        <p  class="scan">415 关注303 文章</p>
                        <p class="desc">独立撰稿人，国内数十家媒体专栏作家</p>
                    </div>
                    <button id="btn4" class="spe-btn1" @click="handleBtn4(this)">进入专栏</button>
                </div>
            </el-col>
        </el-row>

        <div style="text-align: center;padding: 10px 14px 0 24px;">
            <a href="https://zhuanlan.zhihu.com" target="_blank" class="more">查看更多专栏  <i style="font-weight: bold" class="el-icon-arrow-right"></i> </a>
        </div>
    </div>

</template>

<script>
    export default {
        name: "Special",
        methods:{
            handleBtn1(){
                // this.push('https://zhuanlan.zhihu.com/jameshzd-elecat')
                window.location.href="https://zhuanlan.zhihu.com/jameshzd-elecat";
            },
            handleBtn2(){
                window.location.href="https://www.zhihu.com/column/iRobman";
            },
            handleBtn3(){
                window.location.href="https://www.zhihu.com/column/smetalk";
            },
            handleBtn4(){
                window.location.href="https://www.zhihu.com/column/libeichen";
            }
        }
    }
</script>

<style scoped>
    .spc-z{
        text-align: center;
    }
    .grid-content{
        background-color: white;
        webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 28px 24px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        min-width: 235px;
        height: 313px;
        border-radius: 4px;
        -webkit-box-shadow: 0 1px 3px 0 rgba(18,18,18,.1);
        box-shadow: 0 1px 3px 0 rgba(18,18,18,.1);

        margin: 20px 5px;
    }

    .spc{
        margin: 10px;
    }
    .spc-a{
        display: block;
        width: 100%;
        height: 80px;
        text-align: center;
        align-content: center;

    }
    .spc-til{
        margin-top: 20px;
        height: 22px;
        line-height: 22px;
        font-size: 16px;
        max-width: 187px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 600;
        text-align: center;
        display: block;
    }
    .ig{
        width: 80px;
        height: 100%;
        border-radius: 50%;
        /*margin-left: 40px;*/
    }

    .scan{
        margin-top: 4px;
        height: 17px;
        line-height: 17px;
        font-size: 12px;
        color: #999;

    }
    .desc{
        text-align: center;
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;


        margin-top: 20px;
        height: 40px;
        line-height: 20px;
        font-size: 14px;
        color: #444;
    }


    .spe-btn1{
        border: none;
        height: 34px;
        width: 88px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: bold;
        outline: none;
        cursor: pointer;
        background-color: #EBF5FF;
        color: #0084ff;
        text-align: center;
        margin-top: 20px;
    }





    .more{
        /*background-color: white;*/
        border-radius: 25px;
        color: #8590a6;

        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 5px 14px 5px 24px;
        height: 48px;
        margin-top: 25px;
        background-color: #fff;
        text-decoration: none;
        font-size: 18px;
        font-weight: bold;

    }

</style>